<template>
  <div>
    单位设置

    <div class="app-container">
      <div class="search-container">
        <el-form
          ref="ruleFormRef"
          :rules="rules"
          :model="form"
          label-width="auto"
          style="max-width: 600px"
          class="demo-ruleForm"
          status-icon
        >
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="企业全称" prop="companyName">
                <el-input v-model="form.companyName" />
              </el-form-item>

              <el-form-item label="企业简称" prop="companyAbbreviation">
                <el-input v-model="form.companyAbbreviation" />
              </el-form-item>

              <el-form-item label="企业电话" prop="companyPhone">
                <el-input v-model="form.companyPhone" />
              </el-form-item>
            </el-col>

            <el-col :span="12" :offset="0">
              <el-form-item label="行业标签">
                <el-input v-model="form.companyLabel" />
              </el-form-item>
              <el-form-item label="详细地址">
                <el-input v-model="form.addr" />
              </el-form-item>
              <el-form-item label="企业描述">
                <el-input v-model="form.describee" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="统一信用代码">
            <el-input v-model="form.companyNode" />
          </el-form-item>
          <el-form-item label="企业Logo">
            <el-upload
              class="avatar-uploader"
              action="https://localhost:14273/api/Unit/UploadFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="form.companyLogo" :src="uploadIamg" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>

          <el-form-item label="所在区域">
            <el-select
              style="width: 160px"
              v-model="form.proVinceId"
              placeholder="请选择"
              clearable
              @change="City(), Area()"
            >
              <el-option
                v-for="item in provinces"
                :label="item.proVinceName"
                :value="item.proVinceId"
              />
            </el-select>
            <el-select
              style="width: 160px; margin-left: 10px; margin-right: 10px"
              v-model="form.cityId"
              placeholder="请选择"
              clearable
              @change="Area()"
            >
              <el-option
                v-for="item in citys"
                :label="item.cityName"
                :value="item.cityId"
              />
            </el-select>

            <el-select
              style="width: 160px"
              v-model="form.areaId"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in areas"
                :label="item.areaName"
                :value="item.areaId"
              />
            </el-select>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="负责人">
                <el-input v-model="form.responsiblePerson" />
              </el-form-item>

              <el-form-item label="财务负责人">
                <el-input v-model="form.financePerson" />
              </el-form-item>
            </el-col>

            <el-col :span="12" :offset="0">
              <el-form-item label="分管负责人">
                <el-input v-model="form.responsibilitiesPerson" />
              </el-form-item>

              <el-form-item label="查看人">
                <el-select
                  v-model="form.lookPerson"
                  placeholder="请选择"
                  clearable
                >
                  <el-option label="孟盘龙" value="1" />
                  <el-option label="刘永刚" value="2" />
                  <el-option label="赵秋实" value="3" />
                  <el-option label="牛骞若" value="4" />
                  <el-option label="赵思彤" value="5" />
                  <el-option label="于晋哲" value="6" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="核算单元">
            <el-select
              v-model="form.accountingUnit"
              placeholder="请选择"
              clearable
            >
              <el-option label="畜牧科技" value="1" />
              <el-option label="养殖科技" value="2" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="success"
              style="text-align: center"
              @click="submitForm(ruleFormRef)"
            >
              确定
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//引用
import { ref, onMounted, reactive } from "vue";
import PurchaseAPI from "@/api/OrganizationalAdministration/index";
import vendor, { AddDataQuery, FileInfo } from "../../../api/Unit/index";
import { ElMessageBox, ElMessage, UploadInstance } from "element-plus";
import AddSupplier from "./addSupplier.vue";
import { useRouter } from "vue-router";
import { Plus } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import type { UploadProps } from "element-plus";

onMounted(() => {
  Province();
  City();
  Area();
});
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  companyName: [{ required: true, message: "企业全称不为空", trigger: "blur" }],
  companyAbbreviation: [
    { required: true, message: "企业全称不为空", trigger: "blur" },
  ],

  companyPhone: [
    { required: true, message: "电话号码不为空", trigger: "blur" },
  ],
});
const uploadIamg = ref("");
//图片上传
const handleAvatarSuccess = (url: any) => {
  form.companyLogo = url.data;
  uploadIamg.value = "https://localhost:14273/Image/" + form.companyLogo;
};

const form = reactive<AddDataQuery>({
  companyId: 0,
  companyName: "",
  companyAbbreviation: "",
  companyLogo: "",
  companyLabel: "",
  areaId: null,
  cityId: null,
  proVinceId: null,
  addr: "",
  companyPhone: "",
  companyNode: "",
  describee: "",
  responsiblePerson: "",
  financePerson: "",
  responsibilitiesPerson: "",
  lookPerson: null,
  accountingUnit: null,
  isdelete: 0,
});

const provinces = ref([]);

const Province = () => {
  vendor
    .ProvinceList()
    .then((res) => {
      provinces.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
const citys = ref([]);
const City = () => {
  form.cityId = 0;
  vendor
    .CityList(form.proVinceId || 0)
    .then((res) => {
      citys.value = res.data;
      console.log(res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};
const areas = ref([]);
const Area = () => {
  form.areaId = 0;
  vendor
    .UnitList(form.cityId || 0)
    .then((res) => {
      areas.value = res.data;
      console.log(res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      vendor.AddUnit(form).then(function (res: any) {
        if (res.code > 0) {
          ElMessage.success("添加成功");
        } else {
          ElMessage.error("添加失败");
        }
      });
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
